<template>
  <div class="bigBox">
    <i class="el-icon-close" @click="goSouYe"></i>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
      <!-- 邮箱 -->
      <div class="youxian" v-if="showYX">
        <div class="mmren_title">{{ mailTitle }}邮箱</div>
        <el-form-item prop="youXianInput" class="youxinag">
          <el-input :disabled="mailDisable" v-model.trim="ruleForm.youXianInput" clearable placeholder="请输入您的新邮箱"></el-input>
        </el-form-item>
        <el-button size="medium" @click="goSouYe">取消</el-button>
        <el-button size="medium" type="primary" :loading="emailLoad" @click="submitYX" v-preventReClick>确定</el-button>
      </div>
      <!-- 邮箱验证 -->
      <div class="checkMail" v-if="showYXYZ">
        <h2 class="title">{{ mailTitle }}邮箱</h2>
        <div class="content">
          <p>验证邮件已发送至{{ ruleForm.youXianInput }}</p>
          <p class="pb_40">请至您的邮箱查收验证邮件，点击邮件里的确认连接，进行邮箱确认操作</p>
          <el-button size="medium" type="primary" @click="toMail" v-preventReClick>立即前往邮箱</el-button>
        </div>
        <div class="footer">若您没有收到邮件您可以：检查您的垃圾邮件中，是否包含验证邮件；或者<span @click="sendMail(2)">重发验证邮件</span></div>
      </div>
      <!-- 手机号绑定 -->
      <div class="youxian" v-if="showPhone">
        <i class="el-icon-mobile-phone icon"></i>
        <div class="mmren_title">手机验证</div>
        <el-form-item>
          <el-input v-model.trim="ruleForm.phoneInput" placeholder="手机号" disabled></el-input>
        </el-form-item>
        <el-form-item class="youxinag">
          <el-input v-model.trim="ruleForm.phoneYZInput" placeholder="请输入手机验证码" :maxlength="6">
            <el-button slot="append" type="primary" plain id="phones_btn" @click="getyanma" v-preventReClick :disabled="canClick">{{ contents }}</el-button>
          </el-input>
        </el-form-item>
        <el-button size="medium" @click="goSouYe">取消</el-button>
        <el-button size="medium" type="primary" @click="submitSJ" v-preventReClick>确定</el-button>
      </div>
      <!-- 修改手机 -->
      <div class="youxian" v-if="showPhoneXiu">
        <div class="mmren_title">修改手机</div>
        <el-form-item prop="phoneXGInput">
          <el-input v-model.trim="ruleForm.phoneXGInput" @change="xiugais('ruleForm')" placeholder="请输入手机号码" :maxlength="11"></el-input>
        </el-form-item>
        <el-form-item class="youxinag">
          <el-input v-model.trim="ruleForm.phoneXGYZInput" placeholder="请输入手机验证码" :maxlength="6">
            <el-button slot="append" type="primary" plain id="phones_btn2" :class="bgcssla" @click="upPhoneSendSms" :disabled="canClick2" v-preventReClick>{{ contents2 }}</el-button>
          </el-input>
        </el-form-item>
        <el-button size="medium" @click="goSouYe">取消</el-button>
        <el-button size="medium" type="primary" @click="submitXGSJ" v-preventReClick>确定</el-button>
      </div>
      <!-- 修改密码 -->
      <div class="youxian" v-if="showMMXiu">
        <div class="mmren_title">修改密码</div>
        <el-form-item prop="MMInput1">
          <el-input v-model.trim="ruleForm.MMInput1" autocomplete="off" onfocus="this.type='password'" type="text" show-password placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item class="youxinag" prop="MMInput2">
          <el-input v-model.trim="ruleForm.MMInput2" autocomplete="off" onfocus="this.type='password'" type="text" show-password placeholder="请确认新密码"></el-input>
        </el-form-item>
        <el-button size="medium" @click="goSouYe">取消</el-button>
        <el-button size="medium" type="primary" @click="submitXGMM" v-preventReClick>确定</el-button>
      </div>
      <!-- 密码认证 -->
      <div class="mmren" v-if="showRenMM">
        <i class="el-icon-lock icon"></i>
        <div class="mmren_title">密码认证</div>
        <div class="mmren_title2">请输入您的密码</div>
        <el-input v-model.trim="ruleForm.renMMInput" autocomplete="off" onfocus="this.type='password'" type="text" placeholder="请输入您的密码" show-password></el-input>
        <el-button size="medium" @click="goSouYe">取消</el-button>
        <el-button size="medium" type="primary" @click="submit" v-preventReClick>确定</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getUrl, setUrl } from '@/utils/getUrl.js'
import { pinT } from '@/utils/allUrl.js'
export default {
  data: function () {
    return {
      tag: '',
      ruleForm: {
        renMMInput: '', // 认证密码
        youXianInput: '', // 邮箱
        phoneInput: '', // 验证手机号
        phoneYZInput: '', // 验证码
        phoneXGInput: '', // 修改手机号
        phoneXGYZInput: '', // 修改手机验证吗
        MMInput1: '', // 修改密码
        MMInput2: '',
      },
      rules: {
        // 邮箱
        youXianInput: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/, message: '请输入正确的邮箱地址', trigger: 'blur' },
        ],
        // 手机号
        phoneXGInput: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
        ],
        MMInput1: [{ min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }],
        MMInput2: [{ min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }],
      },
      showRenMM: true, // 认证密码显示隐藏
      showYX: false, // 邮箱显示隐藏
      showPhone: false, // 手机绑定
      showPhoneXiu: false, // 手机修改
      showMMXiu: false, // 密码修改
      showYXYZ: false, // 邮箱验证
      contents: '获取验证码',
      totalTime: 60,
      canClick: false,
      contents2: '获取验证码',
      totalTime2: 60,
      canClick2: false,
      bgcssla: '',
      user: '', // 登入用户
      mailTitle: '',
      emailLoad: false,
      Timer: null,
      oldMail: '',
      titleArr: ['验证', '更改', '设置'],
      mailDisable: false,
    }
  },
  watch: {
    emailLoad(newVal, oldVal) {
      this.Timer = setTimeout(() => {
        if (this.emailLoad) {
          this.emailLoad = false
        }
      }, 150000)
    },
  },
  created() {
    this.user = JSON.parse(getUrl('userconter'))
    const { content, phone, type } = this.$route.query
    if (phone) {
      // this.ruleForm.phoneInput = phone
      this.ruleForm.phoneInput = this.user.lxdh
    }
    this.mailTitle = this.titleArr[type]
    if (type === 0) {
      this.mailDisable = true
    }
    this.tag = content
    if (getUrl('email_text') !== '') {
      this.oldMail = getUrl('email_text')
      if (type === 0) {
        this.ruleForm.youXianInput = getUrl('email_text')
      }
    }
  },
  methods: {
    // 跳转邮箱
    toMail() {
      var email = this.ruleForm.youXianInput
      var hash = {
        'qq.com': 'http://mail.qq.com',
        'gmail.com': 'http://mail.google.com',
        'sina.com': 'http://mail.sina.com.cn',
        '163.com': 'http://mail.163.com',
        '126.com': 'http://mail.126.com',
        'yeah.net': 'http://www.yeah.net/',
        'sohu.com': 'http://mail.sohu.com/',
        'tom.com': 'http://mail.tom.com/',
        'sogou.com': 'http://mail.sogou.com/',
        '139.com': 'http://mail.10086.cn/',
        'hotmail.com': 'http://www.hotmail.com',
        'live.com': 'http://login.live.com/',
        'live.cn': 'http://login.live.cn/',
        'live.com.cn': 'http://login.live.com.cn',
        '189.com': 'http://webmail16.189.cn/webmail/',
        'yahoo.com.cn': 'http://mail.cn.yahoo.com/',
        'yahoo.cn': 'http://mail.cn.yahoo.com/',
        'eyou.com': 'http://www.eyou.com/',
        '21cn.com': 'http://mail.21cn.com/',
        '188.com': 'http://www.188.com/',
        'foxmail.com': 'http://www.foxmail.com',
        'outlook.com': 'http://www.outlook.com',
      }
      var _email = email.split('@')[1] // 获取邮箱域
      // 使用 Object.prototype.hasOwnProperty.call(params1, params2)
      // 其中，params1表示需要从中查找指定键的对象；params2表示查找的键名
      if (Object.prototype.hasOwnProperty.call(hash, _email)) {
        // window.open(hash[_email], '_blank', 'scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes') // 打开新的浏览器窗口
        window.open(hash[_email], '_blank') // 在当前浏览器打开新窗口
      } else {
        this.$message.error('抱歉!未找到对应的邮箱登录地址，请自己登录邮箱查看邮件！')
      }
    },
    goSouYe() {
      this.$router.push({
        name: 'userCore', // 路由
        params: {
          // 传递参数
          content: '个人中心',
        },
      })
    },
    // // 取消密码认证
    // goBack: function() {
    //   this.$router.push({
    //     name: 'userCore', // 路由
    //     params: {
    //       // 传递参数
    //       content: '个人中心'
    //     }
    //   })
    // },
    // 密码认证
    async submit() {
      const { renMMInput } = this.ruleForm
      const params = new URLSearchParams()
      params.append('ZH', this.user.zh)
      params.append('MM', renMMInput)
      const { data: res } = await this.$http.post(`${pinT}yonghu/login`, params)
      if (res.code === '0014') {
        return ''
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.showRenMM = false
      if (this.tag === 'mailGengai') {
        var count = this.$route.query.type
        switch (Number(count)) {
          case 0: // 验证
            this.showYX = false
            this.ruleForm.youXianInput = getUrl('email_text')
            this.mailDisable = true
            break
          case 1: // 更改
            break
          case 2: // 设置
            break
        }
        this.mailTitle = this.titleArr[count]
        this.showYX = true
      } else if (this.tag === 'phoneRen') {
        this.showPhone = true
      } else if (this.tag === 'phoneGengai') {
        this.showPhoneXiu = true
      } else if (this.tag === 'MMGengai') {
        this.showMMXiu = true
      }
    },
    inputChange() {},
    // 邮箱
    submitYX() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          return
        }
        if (this.$route.query.type !== 0) {
          if (this.ruleForm.youXianInput === this.oldMail) {
            this.$message.warning('新邮箱地址与旧邮箱地址一致')
            return
          }
        }
        clearTimeout(this.Timer)
        this.emailLoad = true
        this.sendMail()
      })
      // const { youXianInput } = this.ruleForm
      // const params = new URLSearchParams()
      // params.append('ID', this.user.id)
      // params.append('YX', youXianInput)
      // params.append('type', 2)
      // const { data: res } = await this.$http.post(`${pinT}yonghu/updateLxdhMmYx`, params)
      // if (res.code === '0014') {
      //   return ''
      // } else if (res.code !== '0000') {
      //   return this.$message({
      //     type: 'error',
      //     message: res.message,
      //     center: true,
      //   })
      // }
      // this.$message({
      //   type: 'success',
      //   message: res.message,
      //   center: true,
      // })
      // this.user.yx = youXianInput
      // setUrl('userconter', JSON.stringify(this.user))
      // this.goSouYe()
    },
    async sendMail(type) {
      this.emailLoad = true
      const params = new URLSearchParams()
      params.append('email', this.ruleForm.youXianInput)
      const { data: res } = await this.$http.post(`${pinT}yonghu/sendVerificationEmail`, params)
      console.log(res)
      this.emailLoad = false
      switch (res.code) {
        case '0000':
          this.showYX = false // 隐藏输入邮箱界面
          this.showYXYZ = true
          if (type === 2) {
            this.$message.success('重新发送成功')
          }
          break
        default:
          this.$message.error(res.message)
          break
      }
    },
    // 手机验证
    async submitSJ() {
      const { phoneInput, phoneYZInput } = this.ruleForm
      const params = new URLSearchParams()
      params.append('ID', this.user.id)
      params.append('userMobile', phoneInput)
      params.append('smsCode', phoneYZInput)
      const { data: res } = await this.$http.post(`${pinT}yonghu/bindPhoneNumber`, params)
      if (res.code === '0014') {
        return ''
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.user.lxdhzt = 1
      setUrl('userconter', JSON.stringify(this.user))
      this.goSouYe()
    },
    // 修改手机
    async submitXGSJ() {
      const { phoneXGInput, phoneXGYZInput } = this.ruleForm
      const params = new URLSearchParams()
      params.append('ID', this.user.id)
      params.append('userMobile', phoneXGInput)
      params.append('smsCode', phoneXGYZInput)
      const { data: res } = await this.$http.post(`${pinT}yonghu/bindPhoneNumber`, params)
      if (res.code === '0014') {
        return ''
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.user.lxdh = phoneXGInput
      setUrl('userconter', JSON.stringify(this.user))
      this.goSouYe()
    },
    // 修改密码
    async submitXGMM() {
      const { MMInput1, MMInput2 } = this.ruleForm
      if (MMInput1 !== MMInput2) {
        return this.$message({
          type: 'error',
          message: '两次输入的密码不一致，请检查后输入',
          center: true,
        })
      }
      const params = new URLSearchParams()
      params.append('ID', this.user.id)
      params.append('MM', MMInput2)
      params.append('type', 1)
      const { data: res } = await this.$http.post(`${pinT}yonghu/updateLxdhMmYx`, params)
      if (res.code === '0014') {
        return ''
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.$router.push('/')
    },
    // 验证手机获取验证码
    async getyanma() {
      const { phoneInput } = this.ruleForm
      this.canClick = true
      var clock = window.setInterval(() => {
        this.totalTime--
        this.contents = this.totalTime + ' S 后重试'
        if (this.totalTime < 1) {
          // 当倒计时小于0时清除定时器
          window.clearInterval(clock)
          this.contents = '获取验证码'
          this.totalTime = 60
          this.canClick = false
        }
      }, 1000)
      const params = new URLSearchParams()
      params.append('phone', phoneInput)
      const { data: res } = await this.$http.post(`${pinT}yonghu/sendBindPhoneSms`, params)
      if (res.code === '0014') {
        return ''
      } else if (res.code !== '0000') {
        window.clearInterval(clock)
        this.contents = '获取验证码'
        this.totalTime = 60
        this.canClick = false
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      // this.$message({
      //   type: 'success',
      //   message: res.message,
      //   center: true
      // })
    },
    xiugais(ruleForm) {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.canClick2 = false
        } else {
          this.canClick2 = true
        }
      })
    },
    // 修改手机发送验证码
    async upPhoneSendSms() {
      const { phoneXGInput } = this.ruleForm
      if (phoneXGInput) {
        this.canClick2 = true
        var clock2 = window.setInterval(() => {
          this.totalTime2--
          this.contents2 = this.totalTime2 + ' S 后重试'
          if (this.totalTime2 < 1) {
            // 当倒计时小于0时清除定时器
            window.clearInterval(clock2)
            this.contents2 = '获取验证码'
            this.totalTime2 = 60
            this.canClick2 = false
          }
        }, 1000)
        const params = new URLSearchParams()
        params.append('phone', phoneXGInput)
        // 1-更换手机号码
        params.append('type', 1)
        const { data: res } = await this.$http.post(`${pinT}yonghu/sendBindPhoneSms`, params)
        if (res.code === '0014') {
          return ''
        } else if (res.code !== '0000') {
          window.clearInterval(clock2)
          this.contents2 = '获取验证码'
          this.totalTime2 = 60
          this.canClick2 = false
          return this.$message({
            type: 'error',
            message: res.message,
            center: true,
          })
        }
      }

      // this.$message({
      //   type: 'success',
      //   message: res.message,
      //   center: true
      // })
    },
  },
}
</script>
<style lang="scss" scoped>
.bigBox {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;
  .el-icon-close {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 30px;
    color: #d8d8d8;
    cursor: pointer;
  }
  .mmren_title {
    color: #333;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 50px;
  }
  .icon {
    font-size: 30px;
    color: #000;
    margin-bottom: 5px;
  }
  .mmren {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 300px;
    height: 300px;
    .mmren_title2 {
      color: #909399;
      margin-bottom: 20px;
    }
    .el-input {
      border-radius: 0;
      margin-bottom: 35px;
    }
  }
  .youxian {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 300px;
    height: 300px;
    .youxinag {
      border-radius: 0;
      padding-bottom: 35px;
    }
  }
  .checkMail {
    max-width: 610px;
    margin: 0 auto;
    text-align: center;
    .title {
      color: #333333;
      font-size: 18px;
      padding: 60px 0 50px;
    }
    .content {
      border: 1px solid #cde5c1;
      background-color: #ebf5e6;
      border-radius: 4px;
      padding: 40px 0 50px;
      p {
        font-size: 14px;
        color: #67c23a;
        font-weight: 400;
        line-height: 30px;
        &:first-child {
          font-size: 16px;
          font-weight: 600;
        }
        &.pb_40 {
          padding-bottom: 40px;
        }
      }
    }
    .footer {
      font-weight: 400;
      color: #717a89;
      font-size: 14px;
      padding-top: 40px;
      span {
        color: #2892fa;
        cursor: pointer;
      }
    }
  }
  #phones_btn {
    width: 80px;
    height: 34px;
    padding: 0;
    border-radius: 0;
    border: none;
    color: #2e92f7;
    background-color: #c2dfff;
  }
  // #phones_btn:hover {
  //   // background-color: #409eff;
  //   // color: #fff;
  // }
  #phones_btn2 {
    width: 80px;
    height: 34px;
    padding: 0;
    border-radius: 0;
    border: none;
    color: #2e92f7;
    background-color: #c2dfff;
  }
  // #phones_btn2:hover {
  //   // background-color: #409eff;
  //   // color: #fff;
  // }
}
</style>
